<template>
  <view
    class="nav-bar relative flex w-full items-center"
    :style="{
      height: useSystemStore.navBarHeight + 'px',
      paddingTop: useSystemStore.statusBarHeight + 'px',
    }">
    <view v-if="props.showBack" class="box-border flex items-center pl-24" :style="MenuRect">
      <wd-icon name="thin-arrow-left" size="16px" />
    </view>
    <view class="w-full flex-1" style="border: 1px solid red">
      <slot name="center">
        <view class="line-clamp-1 px-48 text-center">中间区域浩丰科技数据开发刷卡机发货开始付款后看</view>
      </slot>
    </view>

    <view v-if="props.showBack" class="overflow-hidden" :style="MenuRect" />
  </view>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import useStore from '@/store'
import { onLoad } from '@dcloudio/uni-app'

const { useSystemStore } = useStore()

interface Iprops {
  showBack?: boolean
}

const props = withDefaults(defineProps<Iprops>(), {
  showBack: true,
})

const MenuRect = computed(() => {
  return {
    width:
      useSystemStore.menuRect?.width == 0 ? '50px' : (useSystemStore.menuRect?.width || 0) + ((useSystemStore.screenWidth || 0) - (useSystemStore.menuRect?.right || 0)) + 'px',
    height: useSystemStore.menuRect?.height + 'px',
  }
})

onLoad(() => {
  console.log(useSystemStore.menuRect, 19)
})
</script>

<style scoped lang="scss"></style>
